<script setup>
import Item from './Item.vue';
import { useUser } from '@/stores/index';
import {ref} from 'vue';
let user = useUser();
let shou = ref('');
let shan = ref('');
let obj = [
    {list:'绝地求生',title:'“这不只是一场游戏，这是大逃杀!”随着时间变化生存圈的缩小，我们共同奔跑努力-随着时间变化生存圈的缩小这不只是一场游戏，这是大逃杀!'},
    {list:'香肠派对',title:'游戏的故事剧情围绕着一组3男带1妹的小分队展开，讲述四个“菜肠”想办法，在残酷的世界中，将各路高手打败，实现大吉大利，今晚吃肠的梦想'},
    {list:'蘑菇海龟汤',title:'一个人玩的海龟汤-悬疑烧脑的文字推理游戏，悬疑-意想不到的结局，现推出手机试玩---48场悬疑推理！--尽情期待'},
    {list:'世界之外',title:'“现在的分离只是短暂的-现在终于迎来了我们的见面”百变副本-扮演世上多样的身份。“我永远在第一次见到你的地方等你-下雨也在”'},
    {list:'蜡笔小新之帮手',title:'小新的妈妈居然生病了？！一起共同协作为小新的家人做一顿饭吧!快来帮助小新照顾妈妈，一起共同协作为小新的家人做一顿饭吧！'},
    {list:'金铲铲之战',title:'棋盘上的快乐-每局比赛由八名玩家共同进行一场各自为战的博弈对抗，玩家通过招兵买马，融合英雄，提升战力，排兵布阵，成为最终立于战场上的赢家'},
    {list:'魔法小p',title:'魔法是什么？这里有答案同进行一场各自为战的博弈对抗，玩家通过招兵买马，融合英雄，提升战力，排兵布阵，成为最终立于战场上的赢家'},
    {list:'沙威玛传奇',title:'让我们一起做煎饼吧！进行一场各自为战的博弈对抗，玩家通过招兵买马，融合英雄，提升战力，排兵布阵，成为最终立于战场上的赢家'},
]
</script>
<template>
    <div class="page">
        <div class="nav">
            <Item v-for="x in obj" :list="x.list" :title="x.title" v-model:shou="shou" v-model:shan="shan"></Item>
        </div>
    </div>
</template>
<style scoped>
.page {
    width: 375px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow:  -2px 2px 10px #ccc;
    overflow-y:auto;
}
.nav{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 8px;
    text-align: center;
    padding-bottom: 45px;
}
.nav>*{
    width: 170px;
}
</style>